<template>
  <div>
      <div v-if="mode === 'edit'">
          <el-select v-model="value1" multiple placeholder="请选择" filterable
          @change="change"  :disabled="disabled"
          >
              <el-option
                v-for="item in dataList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
            </el-select>
      </div>
      <div v-else>
       {{ value }}
      </div>
  </div>
</template>

<script>
import datasource from '../../mixins/steps-datasource'
  export default {
      name: 'selects',
      mixins: [datasource],
      props: {
          mode: {
          default: "edit", // 编辑模式和 edit， 展示模式 view
          },
          readonly: {
          type: Boolean,
          default: false,
          },
          disabled: {
          type: Boolean,
          default: false,
          },
      },
    data() {
      return {
        value1: [],
        dataList:[],
        disabled:false,
      }
    },
    watch:{
      options:{
      immediate:true,
      deep: true,
      handler(val){
          if(val && val.length){
              this.dataList = val.map(item=>{
                return {
                value:item.value,
                label:item.label,
                }
             })
          }
      }
      }
},
mounted() {
  if(this.value){
    this.value1 = this.value.split(',')
    if(this.mode == 'view'){
        this.disabled = true;
    }
  }
  
},
computed:{
  change () {
      this.$emit("input", this.value1.join(','))
      console.log('打印值：'+this.value1.join(','))
  }
}
  }
</script>